<template>
  <div>
    <slot :myTxt="mytxt"></slot>
    <van-popup v-model="show" round position="bottom" get-container="#app" @close="closePop">
      <van-cascader class="change_data2" @change="onChange" v-model="cascaderValue" title="请选择所在地区" :options="options"
        :closeable="false" :field-names="fieldNames">
        <template #title>
          <div class="set_title">

            <div class="title">筛选所属省份</div>
            <div>

              <van-button class="f-26" @click="confirm">确定</van-button>
            </div>
          </div>
        </template>
      </van-cascader>
    </van-popup>
  </div>
</template>

<script>
  import {
    RegionService,
  } from '@/api'
  export default {
    name: 'Position',
    model: {
      prop: 'province_id',
      event: 'change',
    },
    props: {
      province_id: {
        type: String,
        default: ''
      },
      search_type: String
    },
    mounted() {
      console.log(112);
      this.setOptions();


    },
    methods: {
      onChange({
        selectedOptions,
        value
      }) {
        this.mytxt = selectedOptions[0].region_name
        this.$emit('change', value)
        console.log(selectedOptions, value);
      },
      change_pop() {
        this.show = true;
      },
      setOptions() {
        RegionService.getRegion({
          max_level: 1
        }).then(res => {
          console.log("data: " + res)
          this.options = res.data;
          this.options.forEach(item => {
            if (item.id == this.province_id) {
              this.mytxt = item.region_name
              
            }
          })
        })
      },
      confirm() {
        this.show = false;
      },


      closePop() {
        // this.setOptions();
        this.show = false;
      }
    },
    data() {
      return {
        show: false,
        cascaderValue: '',
        mytxt: '',
        fieldNames: {
          text: 'region_name',
          value: 'id',
          children: 'items'
        },
        options: [{
            name: '浙江省',
            code: '330000',
            items: [{
              name: '杭州市',
              code: '330100',
              items: [{
                name: '杭州市1',
                code: '330101',
                items: [{
                  name: '杭州市2',
                  code: '330102',
                  items: [{
                    name: '杭州市3',
                    code: '330103',
                    items: [{
                      name: '杭州市4',
                      code: '330104',
                      items: [{
                        name: '杭州市5',
                        code: '330105',
                        items: [{
                          name: '杭州市6',
                          code: '330106',
                          items: [{
                            name: '杭州市7',
                            code: '330107'
                          }]
                        }]
                      }]
                    }]
                  }]
                }]
              }]
            }],
          },

        ],
      };
    },
  }
</script>

<style lang="less" scoped>
  /deep/.van-cascader__header {
    width: 700px;
    margin: 0 auto;
  }

  /deep/.van-cascader__title {
    width: 100%;

  }

  /deep/ .van-cascader__option {
    font-size: 24px;
  }

  /deep/ .van-tab {
    font-size: 24px;
  }


  .change_data2 {


    .set_title {
      display: flex;

      justify-content: space-between;
      align-items: center;

      .title {
        font-size: 26px;
      }
    }

    .icon_size {
      width: 26px;
      height: 26px;
      margin-right: 12px;
    }
  }
</style>